<template>
	<view class="container">
		<!-- 计算器类型选择区域 -->
		<view class="calculator-types">
			<view class="title-area">
				<text class="main-title">电商计算器</text>
				<view class="start-btn">电商创业由此开始</view>
			</view>

			<view class="types-grid">
				<view class="type-item" v-for="(item, index) in calculatorTypes" :key="index"
					:class="{ active: currentType === index }" @tap="selectType(index)">
					<text class="type-title">{{item.title}}</text>
					<text class="type-desc">{{item.desc}}</text>
				</view>
			</view>
		</view>

		<!-- 动态组件区域 -->
		<!-- <component
     :is="currentCalculator" 
     v-if="currentCalculator"
     :key="currentType"
   ></component> -->

		<!-- 功能按钮区 -->
		<view class="function-buttons">
			<button class="function-btn platform" @click="jump">
				<image src="/static/images/top.png"></image>
				<text>电商必备软件推荐</text>
			</button>

			<button class="function-btn share" open-type="share">
				<image src="/static/images/share.png"></image>
				<text>分享小程序给好友</text>
			</button>
			
		</view>


		<view class="calculator-content">
			<MerchantCalculator v-if="currentType === 2" key="merchant" />
			<InfluencerCalculator v-else-if="currentType === 3" key="influencer" />
			<CooperationCalculator v-else-if="currentType === 0" key="cooperation" />
			<AdvertisingCalculator v-else-if="currentType === 1" key="advertising" />
		</view>
		
		

	</view>
</template>

<script>
	import MerchantCalculator from './components/MerchantCalculator.vue'
	import InfluencerCalculator from './components/InfluencerCalculator.vue'
	import CooperationCalculator from './components/CooperationCalculator.vue'
	import AdvertisingCalculator from './components/AdvertisingCalculator.vue'
	import {
		baseUrl,
		fetchGroupDetail
	} from "@/api/api.js"
	export default {

		components: {
			MerchantCalculator,
			InfluencerCalculator,
			CooperationCalculator,
			AdvertisingCalculator
		},
		data() {
			return {
				currentType: 0,
				groupData: {
					description: "",
					name: "",
					smallimage: "",
					path: "pages/calculator/calculator"
				},
				calculatorTypes: [{
						title: '达人商家合作计算器',
						desc: '精选联盟合作专用',
						component: CooperationCalculator
					},
					{
						title: '投放利润计算器',
						desc: '投放类型商家计算使用',
						component: AdvertisingCalculator
					},
					{
						title: 'ROI商家计算器',
						desc: '投放类型商家计算使用',
						component: MerchantCalculator
					},
					{
						title: 'ROI达人计算器',
						desc: '投放类型达人计算使用',
						component: InfluencerCalculator
					}

				]
			}
		},
		computed: {
			currentCalculator() {
				return this.calculatorTypes[this.currentType].component
			}
		},
		mounted() {
			this.handleFetchGroup()
		},
		onLoad() {
			uni.showShareMenu({
				withShareTicket: true, // 是否使用带 shareTicket 的转发详情
				menus: ['shareAppMessage', 'shareTimeline'] // 需要显示的菜单项，默认全部显示
			});
		},
		onShareAppMessage() { //发送给朋友
			return {
				title: this.groupData.description,
				imageUrl: this.groupData.smallimage,
				path: this.groupData.path
			}
		},
		onShareTimeline() { //分享到朋友圈
			return {
				title: this.groupData.description,
				imageUrl: this.groupData.smallimage,
				path: this.groupData.path
			}
		},
		methods: {
			selectType(index) {
				this.currentType = index
			},
			async handleFetchGroup() {
				try {
					const result = await fetchGroupDetail(5);
					this.groupData = result.data
					this.groupData.smallimage = baseUrl + this.groupData.smallimage
				} catch (error) {
					console.error('Fetch resource failed:', error);
				}
			},
			jump(){
				uni.switchTab({
					url:"/pages/software/software"
				})
			}
		}
	}
</script>

<style>
	.container {
		padding: 20rpx;
		background-color: #f8f8f8;
	}

	.calculator-types {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.title-area {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.main-title {
		font-size: 36rpx;
		color: #ff6b00;
		font-weight: bold;
	}

	.start-btn {
		margin-left: 20rpx;
		background-color: #ff6b00;
		color: #fff;
		font-size: 24rpx;
		padding: 8rpx 20rpx;
		border-radius: 30rpx;
	}

	.types-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
	}

	.type-item {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 20rpx;
		border: 2rpx solid #eee;
	}

	.type-item.active {
		background-color: #fff8f0;
		border-color: #ff6b00;
	}

	.type-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 10rpx;
	}

	.type-desc {
		font-size: 24rpx;
		color: #999;
	}

	.function-buttons {
		display: flex;
		justify-content: space-between;
		margin: 30rpx 0;
	}

	.function-btn {
		flex: 1;
		margin: 0 10rpx;
		/* padding: 20rpx; */
		background-color: #000;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.function-btn image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.function-btn text {
		color: #fff;
		font-size: 28rpx;
	}
</style>